<template>
  <div>
    <div class="topDivSerch">
      <div class="m-type-area">
        <div class="am-input-group">
          <input v-model="searchData" type="search" class="am-form-field search" placeholder="搜索">
          <span class="am-input-group-btn">
            <button @click="handleSearchClick" class="title_serch  button buttonclick search_btn" type="button" id="search_btn">搜索</button>
          </span>
        </div>
      </div>
    </div>
    <div style="height:1.04rem"></div>
    <list-filter @showSelect="showSelect"></list-filter>
    <div style="height:.68rem"></div>
    <div class="product">
      <div class="productDiv">
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="moreLoading"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false"
        >
          <li class="pinterestLi" v-for="item of list" :key="item.id">
            <router-link :to="'/detail/' + item.id">
              <div class="pinterest_img">
                <img class="pinterest_img_sty" :src="item.imgUrl" alt="item.title">
                <div class="comments-link">
                  <div class="listTitle">
                    <div class="pinterest_title" style="text-indent:0px!important;">{{item.title}}</div>
                  </div>
                  <div class="middleinDivTop">
                    <div class="productMoney">
                      ￥{{item.newsMoney}}
                      <span class="g_price">￥{{item.oldMoney}}</span>
                    </div>
                  </div>
                  <div class="tag-div">
                    <span type="text" class="am-btn am-btn-danger am-radius">6.3折</span>
                  </div>
                  <div class="BottominDiv">
                    <span class="s_rightstr">已售{{item.saleNum}}</span>
                  </div>
                  <div style="clear:both"></div>
                </div>
              </div>
            </router-link>
          </li>
        </ul>
        <div class="loading-box tc" v-if="isLoading">
          <mt-spinner type="snake" class="loading-more"></mt-spinner>
          <span class="loading-more-txt">加载中...</span>
        </div>
        <div style="height: 1.3rem;clear: both;"></div>
      </div>
    </div>
    <public-top></public-top>
    <public-menu></public-menu>
  </div>
</template>

<script>
import axios from 'axios'
import ListFilter from './components/Filter'
import PublicMenu from '../public/Menu'
import PublicTop from '../public/Top'

export default {
  name: 'IntegralList',
  components: {
    ListFilter,
    PublicTop,
    PublicMenu
  },
  data () {
    return {
      searchName: '',
      sort: '',
      order: '',
      list: [],
      searchData: '',
      isLoading: false, // 加载中转菊花
      isMoreLoading: true, // 加载更多中
      noMore: false, // 是否还有更多
      pageInfo: { // 分页信息
        page: 1,
        page_size: 15,
        total: 0, // 总条数
        totalPage: 1 // 总分页数
      }
    }
  },
  methods: {
    showSelect (res) {
      if (res.data === 'paixuA') {
        this.sort = 'id'
      }
      if (res.data === 'paixuB') {
        this.sort = 'sellhit'
      }
      if (res.data === 'paixuC') {
        this.sort = 'prices'
      }
      if (res.data === 'paixuD') {
        this.sort = 'create_date'
      }
      if (this.order === 'asc') {
        this.order = 'desc'
      } else {
        this.order = 'asc'
      }
      this.getAjaxInfo()
    },
    handleSearchClick () {
      this.$router.push({ path: '/list', query: { searchname: this.searchData } })
      this.getAjaxInfo()
    },
    keywordVal () {
      this.searchData = this.$route.query.searchname
    },
    getAjaxInfo (type) {
      this.isLoading = true
      let data = { params: {} }
      if (this.$route.query.searchname) {
        data.params.title = this.$route.query.searchname
      }
      if (this.sort) {
        data.params.sort = this.sort
      }
      if (this.order) {
        data.params.order = this.order
      }
      console.log(data)
      axios.get('/meimai/interface/goods/search', data).then((res) => {
        res = res.data
        console.log(res)
        if (res.code === 0 && res.data) {
          this.list = res.data.proList
          if (type === 'loadMore') {
            this.list = this.list.concat(res.data.proList)
          } else {
            this.list = res.data.proList
          }
          this.pageInfo.total = res.data.total
          this.pageInfo.totalPage = Math.ceil(this.pageInfo.total / this.pageInfo.page_size)
          console.log('总页数', Math.ceil(this.pageInfo.total / this.pageInfo.page_size))
        }
        this.isLoading = false
        this.isMoreLoading = false
      })
    },
    loadMore () {
      if (this.allLoaded) {
        this.moreLoading = true
        return
      }
      if (this.queryLoading) {
        return
      }
      this.moreLoading = !this.queryLoading
      this.pageNum++
    }
  },
  mounted () {
    this.getAjaxInfo()
    this.keywordVal()
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.topDivSerch
  position: fixed
  z-index: 100
  width: 100%
  padding: .14rem .2rem .14rem .2rem
  height: 1.04rem
  background-color: #f8f8f8
  box-sizing: border-box
  .m-type-area
    z-index: 100
    top: .98rem
    width: 100%
    padding: 0
    .am-input-group
      position: relative
      display: flex
      border-collapse: separate
      .search
        background: url(../../assets/img/icon_search.png) no-repeat .2rem
        background-color: white
        padding-left: .7rem
        font-size: 1em
        text-align: left
        border: .02rem solid #e1e1e1
        height: .76rem
        flex: 1
      .am-input-group-btn
        position: relative
        font-size: 0
        white-space: nowrap
        .title_serch
          margin-left: .12rem
          background-color: white
          font-size: .28rem
          border-color: #ddd !important
          height: .76rem
          color: #353535 !important
          padding: .1rem .3rem .1rem .3rem
          border: .02rem solid #ccc
.product
  background-color: #f8f8f8
  position: absolute
  left: 0
  right: 0
  top: 1.72rem
  bottom: 0.98rem
  .productDiv
    width: 100%
    .pinterestLi
      position: relative
      display: block
      left: 1px
      top: 10px
      width: calc(50% - 0.3rem)
      margin: 0.14rem
      padding: 0
      box-shadow: 0 0.04rem 0.12rem rgba(105, 105, 105, 0.5)
      list-style: none
      float: left
      overflow: hidden
      background-color: #fff
      z-index: 1
      box-sizing: border-box
      .pinterest_img
        display: inline-block
        width: 100%
        font-size: 0
        min-height: 40px
        .pinterest_img_sty
          height: 175px
          width: 100%
          display: inline-block
      .comments-link
        padding: 0px 6px
        font-size: 12px
        font-size: 0.26rem
        .listTitle
          float: left
          width: 100%
          position: relative
          .pinterest_title
            text-decoration: none
            font-size: 14px
            color: #1c1f20
            display: inline-block
            width: 100%
            height: auto
            line-height: 22px
            vertical-align: middle
            ellipsis()
        .middleinDivTop
          float: left
          width: 100%
          margin-top: -5px
          .productMoney
            line-height: 25px
            color: #ed2935
            float: left
            margin-left: 0px
            margin-right: 5px
            vertical-align: middle
            height: 25px
            font-size: 16px
            overflow: hidden
            text-overflow: ellipsis
            .g_price
              text-decoration: line-through
              color: #a1a1a1
              font-size: 13px
              padding-left: 2px
              font-weight: 100
        .tag-div
          position: absolute
          line-height: 14px
          top: 0.01rem
          left: 0.01rem
          .am-btn-danger
            color: #fff
            background-color: #f93c42 !important
            border-color: #f93c42 !important
            padding: 1px 4px
            text-align: center
            display: inline-block
            line-height: 1.2
        .BottominDiv
          height: 16px
          line-height: 15px
          padding: 0
          margin: 0
          .s_rightstr
            float: right
            margin-right: 0px
            vertical-align: middle
            color: #676869
            text-align: right
            width: 58%
            font-size: 11px
            line-height: 17px
</style>
